<template>
  <div>
    <div class="manager-container">
      <a-menu
        :default-selected-keys="[selectKey]"
        :default-open-keys="['sub1']"
        mode="inline"
        @select="selectMenuItem"
      >
        <a-menu-item key="Info">
          <router-link to="/manager/info">  <a-icon type="pie-chart" />用户信息</router-link>
        </a-menu-item>
        <a-menu-item key="Collection">
          <router-link to="/manager/collection"><a-icon type="desktop" />用户收藏</router-link>
        </a-menu-item>
        <a-menu-item key="Comment">
          <router-link to="/manager/comment"><a-icon type="inbox" />用户评论</router-link>
        </a-menu-item>
      </a-menu>
      <div class="manager-info">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      selectKey: this.$route.name
    }
  },
  watch: {
  },
  methods: {
    selectMenuItem(e) {
    }
  }
}
</script>

<style lang="less" scoped>
.manager-container {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  min-height: 700px;
  .ant-menu{
    width: 20%;
  }
  .manager-info{
    width: 78%;
    background-color: #ffffff;
    padding: 15px;
  }
}
</style>
